<template>
	<view class="order-detail">
		<u-navbar title="我的订单" :background="background" back-icon-color="#FFF" title-color="#fff" title-size="32" :border-bottom="false"></u-navbar>
		<view class="bg"><image src="../../static/images/bg7@2x.png"></image></view>
		<view class="detail-content">
			<view class="detail-top u-flex u-col-center">
				<view class="address-left u-flex-2">
					<image src="../../static/images/icon_gift.png" class="address-icon" mode=""></image>
					<view class="">收货地址</view>
				</view>
				<view class="address-info u-flex-8">
					<view class="u-flex u-col-center">
						<view class="">陈大胖</view>
						<view class="mobile">13860800211</view>
					</view>
					<view class="address-desc">福建省厦门市思明区软件园二期福建省厦门市思明区软件园二期福建省厦门市思明区软件园二期</view>
				</view>
			</view>
			<view class="detail-center u-flex u-flex-col u-row-center u-col-top">
				<view class="u-flex">
					<view class="goods-img"><image src="../../static/images/chick8.png" mode=""></image></view>
					<view class="u-flex u-flex-col u-row-between u-col-top">
						<view class="">
							<view class="u-line-1 font-32">玉林三黄鸡</view>
							<view class="font-28 color-999999">宰杀后净重约2斤</view>
						</view>
						<view class="font-28 color-F75F53 service">不支持七天无理由退货</view>
					</view>
				</view>
				<view class="detail-box">
					<view class="detail-item u-flex u-col-center">
						<view class="font-32 u-flex-3">消费助农</view>
						<view class="font-28 color-999999 u-flex-7">政府授权</view>
					</view>
					<view class="detail-item u-flex u-col-center">
						<view class="font-32 u-flex-3">绿色食品</view>
						<view class="font-28 color-999999 u-flex-7">山地放养，五谷杂粮，健康绿色</view>
					</view>
					<view class="detail-item u-flex u-col-center">
						<view class="font-32 u-flex-3">冷链配送</view>
						<view class="font-28 u-flex-7 u-flex u-col-center u-row-between">
							<view class="color-999999">冷链配送</view>
							<view class="u-flex u-col-center">
								<view class="">冷链快递 包邮</view>
								<u-icon name="arrow-right" color="#999999" size="30"></u-icon>
								<!-- <image class="right-arrow" src="" mode=""></image> -->
							</view>
						</view>
					</view>
					<view class="detail-item u-flex u-col-center">
						<view class="font-32 u-flex-3">购买方式</view>
						<view class="u-flex-7">
							<view class="minus-plus u-flex u-col-center">
								<view class="minus u-flex u-col-center u-row-center"><u-icon name="minus" color="#999999" size="30"></u-icon></view>
								<view class="number">10002</view>
								<view class="plus u-flex u-col-center u-row-center"><u-icon name="plus" color="#999999" size="30"></u-icon></view>
							</view>
						</view>
					</view>
					<view class="detail-item u-flex u-col-center">
						<view class="font-32 u-flex-3">幸运号码</view>
						<view class="font-28 u-flex-7 u-flex u-col-center u-row-right">
							<view class="u-flex u-col-center">
								<view class="">10002</view>
								<u-icon name="arrow-right" color="#999999" size="30"></u-icon>
								<!-- <image class="right-arrow" src="" mode=""></image> -->
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="detail-bottom u-flex u-col-center u-row-between">
				<view class="">
					<view class="font-28 u-margin-bottom-32">共计12个</view>
					<view class="u-flex">
						<view class="font-28">合计：</view>
						<view class="u-flex color-F75F53">
							<view class="font-28 ">
								￥
							</view>
							<view class="font-36">
								1200.00
							</view>
						</view>
					</view>
				</view>
				<view class="font-36 is-buy">已支付</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			orderId:""
		};
	},
	onLoad(options) {
		this.orderId = options.order_id
	},
	onReady() {
		this.getDetail()
	},
	methods: {
		getDetail(){
			let params = {
				order_id:this.orderId
			}
			this.$u.api.getOrderDetail(params).then(res=>{}).catch(err=>{
				console.log(err);
			})
		}
	}
};
</script>

<style>
.order-detail {
	min-height: 100vh;
	background: rgb(241, 245, 246);
}
.bg {
	position: fixed;
	top: -44px;
	z-index: 1;
	width: 100%;
	height: 324rpx;
}
.bg image {
	width: 100%;
	height: 100%;
	display: flex;
}
.detail-content {
	position: relative;
	z-index: 3;
	width: 700rpx;
	margin: 0 auto;
	top: 30rpx;
}
.detail-top,
.detail-center,
.detail-bottom {
	width: 700rpx;
	height: 200rpx;
	background: rgba(255, 255, 255, 1);
	border-radius: 20rpx;
	padding: 0 34rpx;
	box-sizing: border-box;
}
.address-icon {
	width: 86rpx;
	height: 86rpx;
	border-radius: 50%;
}
.address-left {
	color: #999999;
	font-size: 24rpx;
}
.address-info {
	font-size: 32rpx;
}
.address-info .mobile {
	color: #999999;
	margin-left: 16rpx;
}
.address-desc {
	margin-top: 30rpx;
	font-size: 24rpx;
}
.detail-center {
	min-height: 700rpx;
	margin: 20rpx 0;
}
.goods-img {
	width: 160rpx;
	height: 160rpx;
	border: 4rpx solid rgba(216, 108, 43, 1);
	border-radius: 10rpx;
	margin-right: 36rpx;
}
.goods-img image {
	width: 100%;
	height: 100%;
}
.service {
	margin-top: 60rpx;
}
.detail-box {
	width: 100%;
	margin-top: 50rpx;
}
.detail-item {
	margin-top: 40rpx;
}
.right-arrow {
	width: 16rpx;
	height: 32rpx;
	margin-left: 6rpx;
}
.detail-bottom {
	height: 160rpx;
}
.minus-plus {
	min-width: 220rpx;
	height: 54rpx;
	background: rgba(255, 255, 255, 1);
	/* border: 1px solid rgba(245, 179, 64, 1); */
	border-radius: 10rpx;
}
.minus,
.plus {
	width: 70rpx;
	height: 54rpx;
	border: 1px solid rgba(245, 179, 64, 1);
}
.minus{
	border-top-left-radius: 10rpx;
	border-bottom-left-radius: 10rpx;
}
.plus{
	border-top-right-radius: 10rpx;
	border-bottom-right-radius: 10rpx;
}
.number {
	min-width: 80rpx;
	height: 54rpx;
	background: rgba(245, 179, 64, 1);
	line-height: 54rpx;
	text-align: center;
	color: #ffffff;
	font-size: 36rpx;
}
.is-buy{
	width:200rpx;
	height:60rpx;
	background:rgba(245,179,64,1);
	border:4rpx solid rgba(204,126,43,1);
	border-radius:20rpx;
	text-align: center;
	line-height: 56rpx;
	color: #FFFFFF;
}
</style>
